<dashboard-app
  class="app-container dashboard-container"
  ng-class="{'dashboard-container-with-margins': model.useMargins}"
>
  <!-- Local nav. -->
  <kbn-top-nav name="dashboard" config="topNavMenu">
    <!-- Transcluded elements. -->
    <div data-transclude-slots>
      <!-- Title. -->
      <div
        data-transclude-slot="topLeftCorner"
        class="kuiLocalBreadcrumbs"
        data-test-subj="breadcrumbs"
        role="heading"
        aria-level="1"
      >
        <div class="kuiLocalBreadcrumb">
          <a class="kuiLocalBreadcrumb__link" href="{{landingPageUrl()}}">Dashboard</a>
        </div>
        <div class="kuiLocalBreadcrumb">
          {{ getDashTitle() }}
        </div>
      </div>

      <!-- Search. -->
      <div ng-show="chrome.getVisible()" class="fullWidth" data-transclude-slot="bottomRow">
        <query-bar
          query="model.query"
          app-name="'dashboard'"
          on-submit="updateQueryAndFetch($query)"
        >
        </query-bar>
      </div>
    </div>
  </kbn-top-nav>

  <!-- Filters. -->
  <filter-bar
    ng-show="showFilterBar()"
    state="state"
    index-patterns="indexPatterns"
    ng-if="model.query.language === 'lucene'"
  ></filter-bar>

  <div
    ng-show="getShouldShowEditHelp()"
    class="text-center start-screen"
  >
    <h2 class="kuiTitle kuiVerticalRhythm">
      This dashboard is empty. Let&rsquo;s fill it up!
    </h2>

    <p class="kuiText kuiVerticalRhythm">
      Click the <a kbn-accessible-click class="kuiButton kuiButton--primary kuiButton--small" ng-click="showAddPanel()" aria-label="Add visualization">Add</a> button in the menu bar above to add a visualization to the dashboard. <br/>If you haven't set up any visualizations yet, <a class="kuiLink" href="#/visualize">visit the Visualize app</a> to create your first visualization.
    </p>
  </div>

  <div ng-show="getShouldShowViewHelp()" class="text-center start-screen">
    <h2 class="kuiTitle kuiVerticalRhythm">
      This dashboard is empty. Let&rsquo;s fill it up!
    </h2>

    <p class="kuiText kuiVerticalRhythm">
      Click the <a kbn-accessible-click class="kuiButton kuiButton--primary kuiButton--small" ng-click="enterEditMode()">Edit</a> button in the menu bar above to start working on your new dashboard.
    </p>
  </div>

  <dashboard-viewport-provider
    get-container-api="getContainerApi"
    get-embeddable-factory="getEmbeddableFactory"
  >
  </dashboard-viewport-provider>

</dashboard-app>
